import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Divider, Tag, Table, Pagination, Spin, Upload,Switch
    , AutoComplete
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ChannelMaintenance.less';

import { validatemobile } from '../../utils/utils';

const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
/*
  渠道管理的渠道维护界面
*/
let token = sessionStorage.getItem("token");
let tableListDataSource = [];
const channelState = ["未审核", "正常", "启动", "暂停"]

// @connect(({ channel }) => ({
//     channel,
// }))
@Form.create()
export default class ChannelRiskManagement extends PureComponent {
    state = {
        modalVisible: false,    
    };

    componentDidMount() {
        const { dispatch } = this.props;
        // dispatch({
        //     type: 'channel/fetch',
        //     payload: {
        //         offset: 0,
        //         limit: 10,
        //     },
        // });
    }

    handleRemoveImage = (e) => {
        this.setState({
            uploadButtonChangeState: true
        })
        this.setState({
            fileList: this.state.fileList.filter((item) => {
                return item != e.response.body.key;
            }),
        });
    }

    handleAdd = () => {
       
        // this.setState({
        //     modalVisible: true,
        // });

    }
    handleChange = ({ fileList }) => this.setState({ fileList })

    handleCancel = () => this.setState({ previewVisible: false, })

    handleModalCancel = () => {
        this.props.form.resetFields();
        this.setState({
            modalVisible: false,
        });
    }
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }
    edit = (record) => {
        this.setState({ modalVisible: true })
    }

    

    handleChangeTime = (dates, dateString) => {
        this.setState({
            searchFilters: {
                ...this.state.searchFilters,
                startDate: dates[0],
                endDate: dates[1],
            }
        })
    }

    handleSearchNameChange = (e) => {
       
    }

    handleSearch = (e) => {
        // this.props.dispatch({
        //     type: 'channel/fetch',
        //     payload: {
        //         offset: 0,
        //         limit: 10,
        //         merchantName: this.state.searchFilters.merchantName,
        //         branchId: this.state.value,
        //         createTimeBegin: this.state.searchFilters.startDate,
        //         createTimeEnd: this.state.searchFilters.endDate,
        //     }
        // });
    }

    handleFormReset = () => {
        // const { form, dispatch } = this.props;
        // form.resetFields();
        // this.setState({
        //     dataTime: [],
        //     value: '',
        //     dataTimeFlag: false,
        //     searchFilters: {
        //         ...this.state.searchFilters,
        //         merchantName: '',
        //         branchName: '',
        //         startDate: '',
        //         endDate: '',
        //     }
        // });
        // dispatch({
        //     type: 'channel/fetch',
        //     payload: {
        //         offset: 0,
        //         limit: 10,
        //     },
        // });
    }

    hanleTreeSelectChange = (value, info) => {
        this.setState({
            value: value,
            searchFilters: {
                ...this.state.searchFilters,
                branchName: info,
            }
        })
    }
    channelList = [{
        key: '1',
        dealersNum: 'ICBC-001',
        dealersName: '上海云钱',
        head: '张三',
        contact: '13900001111',
        createTime: '2018-10-02 11:00',
        state: 1,
    }, {
        key: '2',
        dealersNum: 'ICBC-001',
        dealersName: '上海云钱',
        head: '张三',
        contact: '13900001111',
        createTime: '2018-10-02 11:00',
        state: 1,
    }, {
        key: '3',
        dealersNum: 'ICBC-001',
        dealersName: '上海云钱',
        head: '张三',
        contact: '13900001111',
        createTime: '2018-10-02 11:00',
        state: 2,
    }, {
        key: '4',
        dealersNum: 'ICBC-001',
        dealersName: '上海云钱',
        head: '张三',
        contact: '13900001111',
        createTime: '2018-10-02 11:00',
        state: 3,
    }, {
        key: '5',
        dealersNum: 'ICBC-001',
        dealersName: '上海云钱',
        head: '张三',
        contact: '13900001111',
        createTime: '2018-10-02 11:00',
        state: 4,
    }];

    columns = [{
        title: '渠道名称',
        dataIndex: 'dealersNum',
        key: 'dealersNum',
    }, {       
        title: '负责人',
        dataIndex: 'head',
        key: 'head',
    }, {      
        title: '联系电话',
        dataIndex: 'contact',
        key: 'contact',
    }, {
        title: '额度',
        dataIndex: 'contact',
        key: 'contact',
    }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        render(val) {
            return channelState[val-1];
        },
    }, {
        title: '操作',
        dataIndex: 'id',
        key: 'id',
        render: (text, record) => (
            //0:未激活；1：正常；2：已启动；3：已暂停
            <Fragment>
                 <Switch defaultChecked checkedChildren="开" unCheckedChildren="关" />
            </Fragment>
        )
    },
    ];

    renderSimpleForm() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={10} sm={24}>
                        <FormItem label="经销商名称">
                            <Input placeholder="请输入经销商名称"  />
                        </FormItem>
                    </Col>
                    <Col md={10} sm={24}>
                        <FormItem label="营业执照号">
                            <Input placeholder="请输入营业执照号"  />
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={10} sm={24}>
                        <FormItem label="创建时间">
                            <div>
                                <RangePicker
                                    style={{ width: '100%' }}
                                    allowClear={true}
                                    showToday={true}
                                    // onChange={this.handleChangeTime}
                                    // value={[
                                    //     this.state.dataTimeFlag ? null : this.state.searchFilters.startDate,
                                    //     this.state.dataTimeFlag ? null : this.state.searchFilters.endDate
                                    // ]}
                                    showTime={{ hideDisabledOptions: true }}
                                    format="YYYY-MM-DD HH:mm:ss"
                                />
                            </div>
                        </FormItem>
                    </Col>
                    <span className={styles.submitButtons} style={{ textAlign: 'right' }}>
                        <Button type="primary" onClick={this.handleSearch}  >搜索</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
                    </span>
                </Row>
            </Form>
        );
    }

    // handleAddDealers = () => {
    //     const { dispatch } = this.props;
    //     dispatch(routerRedux.push('/channel/channel-form'));
    //     // this.props.dispatch(routerRedux.push('/channel/channel-form'));
    // }

    render() {
        const { dispatch } = this.props;

    
        return (
            <PageHeaderLayout title="渠道列表">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderSimpleForm()}
                        </div>
                        <Table
                            dataSource={this.channelList}
                            // pagination={page}
                            columns={this.columns}
                            // loading={loading}
                            rowKey="id"
                            // onChange={this.handleStandardTableChange}
                        />
                    </div>
                </Card>
                
            </PageHeaderLayout>
        );
    }
}
